<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echarts.min.js"></script>
</head>

<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script>
    const myChart = echarts.init(document.getElementById('main'));

    const option = {
      color: ['#fda224', '#5097ff', '#3fceff', '#34d39a'],
      title: [
        {
          text: '男女薪资分布'
        },
        {
          subtext: '男生',
          left: '50%',
          top: '45%',
          textAlign: 'center',
          subtextStyle: {
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        {
          subtext: '女生',
          left: '50%',
          top: '88%',
          textAlign: 'center',
          subtextStyle: {
            fontSize: 14,
            fontWeight: 'bold'
          }
        }
      ],
      series: [
        {
          type: 'pie',
          radius: ['18%', '25%'],
          center: ['50%', '30%'],
          data: [
            {
              name: '1万以下',
              value: 70
            },
            {
              name: '1-1.5万',
              value: 68
            },
            {
              name: '1.5-2万',
              value: 48
            },
            {
              name: '2万以上',
              value: 40
            }
          ],
          label: {
            position: 'outer',
            alignTo: 'none',
            bleedMargin: 5
          }
        },
        {
          type: 'pie',
          radius: ['18%', '25%'],
          center: ['50%', '72%'],
          data: [
            {
              name: '1万以下',
              value: 70
            },
            {
              name: '1-1.5万',
              value: 68
            },
            {
              name: '1.5-2万',
              value: 48
            },
            {
              name: '2万以上',
              value: 40
            }
          ],
          label: {
            position: 'outer',
            alignTo: 'labelLine',
            bleedMargin: 5
          }
        }
      ]
    };


    myChart.setOption(option);
  </script>
</body>

</html>